<template>
  <el-dialog
    :title="title"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="close"
    width="800px"
  >
    <el-form ref="formName" :model="CreateClassInput" label-width="80px" :rules="rules">
      <div class="nav">
        <el-form-item label="班级名称" prop="name">
          <el-input v-model="CreateClassInput.name" size="small" style="width:340px" maxlength="16" show-word-limit />
        </el-form-item>
        <el-form-item label="关联课程">
          <el-select v-model="addcourse" size="mini" style="width:340px">
            <el-option v-for="(item,index) in course1" :key="index" :value="item.id" :label="item.name" />
          </el-select>
          <el-button style="margin-left:16px;font-size:18px" size="mini" type="primary" @click="addcours">添加</el-button>
        </el-form-item>
        <el-form-item label="所授课程">
          <template>
            <div class="course">
              <span v-for="(item,index) in course2" :key="index" class="courseType">{{ course[item] }}<el-button type="text" icon="el-icon-circle-close" size="mini" style="color:red" @click="deletecourse(index)" /></span>
            </div>
          </template>
        </el-form-item>
        <el-form-item label="人数上限">
          <el-input v-model="CreateClassInput.maxStudentCount" type="number" size="small" style="width:160px" /><span style="font-size:12px;padding-left:4px;display:inline-block">人</span>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="close">取消</el-button>
      <el-button type="primary" :loading="submitLoading" size="mini" @click="addClass('formName')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { api_POST_ClubClass, api_GET_ClubCourse, api_GET_ClubClassId, api_PUT_ClubClassId } from '@/extend/api/hallswaggerApi/app.js';
import { CreateClassInput, Api_GET_ClubCourseQO, Api_GET_ClubClassIdQO } from '@/lib/form/hall/swaggerForm';
export default {
  data() {
    return {
      title: '',
      dialogVisible: false,
      submitLoading: false,
      Api_GET_ClubClassIdQO: new Api_GET_ClubClassIdQO(),
      course: {},
      course1: [],
      course2: [],
      addcourse: '',
      CreateClassInput: new CreateClassInput(),
      Api_GET_ClubCourseQO: new Api_GET_ClubCourseQO(),
      rules: {
        name: [{ required: true, message: '请输入班级名称', trigger: 'blur' }]
      }
    };
  },
  watch: {
    $route(val) {
      console.log(val.query.id);
      if (val.query.id !== undefined) {
        this.course2 = [];
        this.addcourse = '';
        this.CreateClassInput = new CreateClassInput();
        this.getclass();
      } else {
        this.CreateClassInput = new CreateClassInput();
        this.course2 = [];
        this.addcourse = '';
      }
    }
  },
  created() {
    api_GET_ClubCourse().then(res => {
      console.log(res);
      this.course1 = res.items;
      for (var i = 0; i < res.items.length; i++) {
        this.course[res.items[i].id] = res.items[i].name;
      }
    });
  },
  methods: {
    getclass() {
      console.log('aaa');
      this.Api_GET_ClubClassIdQO.IncludeClassStudentCount = true;
      this.Api_GET_ClubClassIdQO.IncludeCourse = true;
      api_GET_ClubClassId(this.$route.query.id, this.Api_GET_ClubClassIdQO).then(res => {
        console.log(res);
        this.CreateClassInput.name = res.name;
        this.CreateClassInput.maxStudentCount = res.maxStudentCount;
        for (var i = 0; i < res.courses.length; i++) {
          this.course2[i] = res.courses[i].id;
        }
      });
    },
    // 添加班级
    addClass(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.CreateClassInput.courseIdList = this.course2;
          console.log(this.CreateClassInput);
          if (this.$route.query.id) {
            console.log(this.$route.query.id, this.CreateClassInput);
            this.submitLoading = true;
            api_PUT_ClubClassId(this.$route.query.id, this.CreateClassInput).then(res => {
              this.$message({
                message: '编辑成功！',
                type: 'success'
              });
              this.$parent.type();
              this.dialogVisible = false;
              this.submitLoading = false;
            }, error => {
              this.submitLoading = false;
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            });
          } else {
            this.submitLoading = true;
            api_POST_ClubClass(this.CreateClassInput).then(res => {
              this.$message({
                message: '添加成功！',
                type: 'success'
              });
              this.submitLoading = false;
              this.dialogVisible = false;
              this.$parent.type();
            }, error => {
              this.submitLoading = false;
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            });
          }
        } else {
          this.$message('请输入班级名称');
          return false;
        }
      });
    },
    addcours() {
      console.log(this.addcourse);
      for (var i = 0; i < this.course2.length; i++) {
        if (this.course2[i] === this.addcourse) {
          this.$message('添加过此课程');
          return;
        }
      }
      if (this.addcourse.length === 0) {
        this.$message({
          message: '请选择要添加的课程！',
          type: 'success'
        });
        return;
      }
      this.course2.push(this.addcourse);
    },
    deletecourse(index) {
      this.course2.splice(index, 1);
    },
    close() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.course{
  width: 550px;
  min-height: 103px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.courseType{
  line-height: 20px;
  height: 33px;
  display:inline-block;
  border-radius: 7px;
  border: 1px solid #409EFF;
  margin-left: 12px;
  padding: 2px 6px;
}
.anniu{
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>
